<script setup lang="ts">
import { getRecommendedCoursesAPI } from '@/services/home'
import type { PageParams } from '@/types/global'
import type { CourseItem } from '@/types/course'
import { onMounted, ref } from 'vue'
import { config } from '@/global'
// 分页参数
const pageParams: Required<PageParams> = {
  pageNum: 1,
  pageSize: 10,
}
// 猜你喜欢的列表
const courseList = ref<CourseItem[]>([])
// 已结束标记
const finish = ref(false)
// 获取猜你喜欢数据
const getRecommendedCoursesData = async () => {
  // 退出分页判断
  if (finish.value === true) {
    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
  }
  const res = await getRecommendedCoursesAPI(pageParams)
  // guessList.value = res.result.items
  // 数组追加
  courseList.value.push(...res.data.rows)
  // 分页条件
  const total = pageParams.pageNum * pageParams.pageSize
  if (total < res.data.total) {
    // 页码累加
    pageParams.pageNum++
  } else {
    finish.value = true
  }
}
// 重置数据
const resetData = () => {
  pageParams.pageNum = 1
  courseList.value = []
  finish.value = false
}
// 组件挂载完毕
onMounted(() => {
  getRecommendedCoursesData()
})
// 暴露方法
defineExpose({
  resetData,
  getMore: getRecommendedCoursesData,
})
</script>

<template>
  <!-- 猜你喜欢 -->
  <view class="caption">
    <text class="text">课程推荐</text>
  </view>
  <view class="guess">
    <navigator
      class="guess-item"
      v-for="item in courseList"
      :key="item.id"
      :url="`/pages/course/courseDetail?id=${item.id}`"
    >
      <view class="message-card">
        <image class="image" mode="aspectFill" :src="config.baseURL + item.bannerUrl"></image>
        <view class="info-container">
          <view class="name"> {{ item.subjects }} </view>
          <view class="price">
            <text class="small">¥</text>
            <text>{{ item.subjectPrices }}</text>
          </view>
        </view>
      </view>
    </navigator>
    <!-- 添加底部占位区域 -->
    <view class="bottom-placeholder"></view>
  </view>
  <!-- <view class="loading-text">
    {{ finish ? '没有更多数据~' : '正在加载...' }}
  </view> -->
</template>

<style lang="scss">
// 底部占位区域样式
.bottom-placeholder {
  height: 160rpx; // 额外的占位高度
}

:host {
  display: block;
}
/* 分类标题 */
.caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 36rpx 0 40rpx;
  font-size: 32rpx;
  color: #262626;
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx 0 30rpx;

    &::before,
    &::after {
      content: '';
      width: 20rpx;
      height: 20rpx;
      background-image: url(@/static/images/bubble.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
}

/* 猜你喜欢 */
.guess {
  display: flex;
  flex-direction: column; // 改为垂直布局
  gap: 20rpx; // 添加间距
  width: 100%;
  .guess-item {
    width: 100%;
    margin: 0;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); // 统一阴影
    border-radius: 16rpx; // 统一圆角
    padding: 0 20rpx; // 移除左右padding
    + .guess-item {
      margin-top: 20rpx; // 增加顶部间距
    }
  }
  .image {
    width: 100%;
    height: 304rpx;
  }
  .info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 30rpx;
    width: 100%;
  }
  .name {
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 30rpx;
    font-weight: bold;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; // 单行显示
  }
  .price {
    padding: 0;
    line-height: 1;
    color: #cf4444;
    font-size: 26rpx;
  }
  .small {
    font-size: 80%;
  }
}

@media (max-width: 480px) {
  .guess-item {
    padding: 20rpx; // 移动端适配

    .card-title {
      font-size: 32rpx; // 调整标题大小
    }
  }
}
// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}

.message-card {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  margin: 20rpx 0; // 修改为仅保留上下间距
  overflow: hidden;
  transition: all 0.3s ease;
}

.message-card:active {
  transform: scale(0.98);
}

.card-header {
  padding: 30rpx 30rpx 20rpx;
  background-color: #f8fafc;
  border-bottom: 1rpx solid #f0f2f5;
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.card-subtitle {
  font-size: 28rpx;
  color: #666;
}

.card-content {
  padding: 25rpx 30rpx;
}

.content-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: center;
}

.content-item:last-child {
  margin-bottom: 0;
}

.item-label {
  width: 180rpx;
  font-size: 28rpx;
  color: #999;
}

.item-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.comment-item {
  align-items: flex-start; /* 让老师点评内容与标签顶部对齐 */
}

.comment-item .item-value {
  min-height: 80rpx;
}

.card-footer {
  display: flex;
  justify-content: flex-end; /* 让分数在最右侧展示 */
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #f8fafc;
  border-top: 1rpx solid #f0f2f5;
}

.score-badge {
  background-color: #fff7e6;
  color: #ff7d00;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
}
</style>
